<template>
  <view class="forum-container  mo-container">
    <!-- 顶部操作栏 -->
    <view class="header">
      <view>
        <view class="title"
          ><text class="bi bi-chat-square-text"></text> 物理文化论坛</view>
      </view>
      <view>
        <button type="error" size="mini" @tap="showNewPostDialog">
          <text class="bi bi-plus-lg"></text>
          发布新帖
        </button>
      </view>
    </view>

    <!-- 打卡活动区域 -->
    <view class="checkin-container" @tap="goToCheckinPage">
      <view class="checkin-banner">
        <view class="checkin-left">
          <text class="checkin-title">每日打卡活动已开放</text>
          <text class="checkin-desc">完成打卡即可获得50积分奖励！</text>
        </view>
        <view class="checkin-right">
          <button 
            :class="['checkin-btn', hasCheckedIn ? 'checked' : '']" 
            @tap="goToCheckinPage"
          >
            <text class="bi" :class="hasCheckedIn ? 'bi-check-circle-fill' : 'bi-check-circle'"></text>
            {{ hasCheckedIn ? '已打卡' : '去打卡' }}
          </button>
        </view>
      </view>
    </view>

    <!-- 分类选择器 -->
    <view class="category-tabs">
      <uni-segmented-control
        :current="activeCategoryIndex"
        :values="categories.map((cat) => cat.label)"
        @clickItem="onCategoryChange"
        styleType="button"
        activeColor="#6c8380"
      />
    </view>

    <!-- 帖子列表 -->
    <view class="post-list">
      <view v-if="loading" class="loading-state">
        <uni-load-more status="loading" />
      </view>

      <template v-else>
        <view v-if="!filteredPosts.length" class="empty-state">
          <text>暂无帖子</text>
        </view>

        <view
          v-for="post in filteredPosts"
          :key="post._id"
          class="post-card uni-my-3  animate__animated animate__fadeIn"
          @tap="goToDetail(post._id.$oid || post._id)"
        >
          <view class="card-body">
            <!-- 用户信息 -->
            <view class="user-info">
              <image
                :src="post.avatar"
                class="avatar"
                mode="aspectFill"
              />
              <view class="user-detail">
                <text class="username">{{ post.user || "匿名用户" }}</text>
                <text class="time">{{ formatTime(post.createTime) }}</text>
              </view>
            </view>

            <!-- 帖子内容 -->
            <view class="post-content">
              <text class="post-title">{{ post.title }}</text>
              <text class="post-text">{{ post.content }}</text>
            </view>

            <!-- 图片展示 -->
            <view v-if="post.images?.length" class="post-images">
              <view class="image-grid">
                <image
                  v-for="(image, imgIndex) in post.images.slice(0, 3)"
                  :key="imgIndex"
                  :src="url('c', imgIndex, 'jpg')"
                  mode="aspectFill"
                  class="preview-image"
                  @tap.stop="previewImage(post.images, imgIndex)"
                />
                <view v-if="post.images.length > 3" class="more-images">
                  +{{ post.images.length - 3 }}
                </view>
              </view>
            </view>

            <!-- 帖子操作 -->
            <view class="post-actions">
              <view class="action-btn" @tap.stop="toggleLike(post)">
                <text
                  :class="[
                    'bi',
                    post.islinked ? 'bi-heart-fill heart-active' : 'bi-heart',
                  ]"
                ></text>
                <text class="count">{{ post.likes || 0 }}</text>
              </view>
              <view class="action-btn" @tap.stop="openCommentDialog(post)">
                <text class="bi bi-chat"></text>
                <text class="count">{{ post.comment?.length || 6 }}</text>
              </view>
              <view class="action-btn" @tap.stop="sharePost(post)">
                <text class="bi bi-share"></text>
                <text  class="count">{{ post.share || 0 }}</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>

    <!-- 新帖子弹窗 -->
    <uni-popup ref="newPostPopupRef" type="center">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">发布新帖</text>
          <text class="bi bi-x close-btn" @tap="closeNewPostDialog"></text>
        </view>

        <view class="popup-body">
          <view class="form-item">
            <text class="label">标题</text>
            <input
              v-model="newPost.title"
              placeholder="请输入标题"
              class="input"
            />
          </view>

          <view class="form-item">
            <text class="label">分类</text>
            <picker
              :value="newPost.category"
              :range="categories"
              range-key="label"
              @change="onCategoryChange"
            >
              <view class="picker">
                {{ getCategoryLabel(newPost.category) || "请选择分类" }}
              </view>
            </picker>
          </view>

          <view class="form-item">
            <text class="label">内容</text>
            <textarea
              v-model="newPost.content"
              placeholder="分享你的想法..."
              class="textarea"
            />
          </view>

          <view class="form-item">
            <text class="label">图片</text>
            <uni-file-picker
              v-model="newPost.images"
              fileMediatype="image"
              mode="grid"
              :limit="9"
            />
          </view>
        </view>

        <view class="popup-footer">
          <button
            class="submit-btn"

            :loading="submitting"
            @tap="submitNewPost"
          >
            发布
          </button>
        </view>
      </view>
    </uni-popup>

    <!-- 评论弹窗 -->
    <uni-popup ref="commentPopup" type="bottom">
      <view class="comment-popup">
        <view class="popup-header">
          <view class="header-left">
            <text class="bi bi-chat-square-text"></text>
            <text class="popup-title">{{ currentPost?.user }}的帖子</text>
          </view>
          <text class="bi bi-x-lg close-btn" @tap="closeCommentDialog"></text>
        </view>

        <scroll-view class="comments-list" scroll-y>
          <view
            v-for="comment in currentPost?.comment"
            :key="comment._id"
            class="comment-item"
          >
            <image
              :src="getRandomAvatar()"
              class="comment-avatar"
              mode="aspectFill"
            />
            <view class="comment-content">
              <view class="comment-info">
                <text class="comment-username">
                  <text class="bi bi-person-circle"></text>
                  {{ comment.user || "匿名用户" }}
                </text>
                <text class="comment-time">
                  <text class="bi bi-clock"></text>
                  {{ formatTime(comment.create_time) }}
                </text>
              </view>
              <text class="comment-text">{{ comment.content }}</text>
            </view>
          </view>
        </scroll-view>

        <view class="comment-input">
          <view class="input-wrapper">
            <text class="bi bi-pencil-square"></text>
            <input
              v-model="newComment"
              placeholder="写下你的评论..."
              @confirm="submitComment"
            />
          </view>
          <button class="send-btn" type="warn" size="mini" @tap="submitComment">
            <text class="bi bi-send"></text>
            发送
          </button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useForumStore } from "@/stores/forumStore";
import { useUserStore } from "@/stores/userStore";
import { storeToRefs } from "pinia";
import moment from "moment";

// 添加云函数基础URL
const API_URL = "https://fc-mp-d7d620be-76ea-43bb-a05a-d38ceb13c655.next.bspapp.com/comment";

const url = $url;
const forumStore = useForumStore();
const userStore = useUserStore();
const { posts, loading } = storeToRefs(forumStore);
const currentUser = ref("用户名"); // 这里应该从用户状态获取
const newPostVisible = ref(false);
const submitting = ref(false);
const commentDialogVisible = ref(false);
const currentPost = ref(null);
const newComment = ref("");

// 打卡相关状态
const hasCheckedIn = ref(false);

// 检查用户今日是否已打卡
const checkUserCheckinStatus = () => {
  const lastCheckinDate = uni.getStorageSync('lastCheckinDate');
  const today = new Date().toDateString();
  
  // 如果上次打卡日期是今天，则已打卡
  hasCheckedIn.value = lastCheckinDate === today;
  
  console.log('打卡状态检查:', hasCheckedIn.value ? '今日已打卡' : '今日未打卡');
};

// 处理跳转到打卡页面
const goToCheckinPage = () => {
  // if (hasCheckedIn.value) {
  //   uni.showToast({
  //     title: '今日已打卡',
  //     icon: 'none'
  //   });
  //   return;
  // }
  
  uni.navigateTo({
    url: '/pages/forum/checkin',
    success: () => {
      console.log('成功跳转到打卡页面');
    },
    fail: (err) => {
      console.error('跳转失败:', err);
    }
  });
};

// 新帖子表单数据
const newPost = ref({
  title: "",
  category: "",
  content: "",
  images: [],
});

// 分类选项
const categories = [
  { label: "全部", value: "all" },
  { label: "物理历史", value: "history" },
  { label: "物理", value: "art" },
  { label: "物理活动", value: "activity" },
  { label: "物理经验", value: "experience" },
];

// 分类相关状态
const activeCategoryIndex = ref(0);
const activeCategory = ref("all"); // 默认显示全部

// 表单验证规则
const rules = {
  title: [{ required: true, message: "请输入标题", type: "error" }],
  category: [{ required: true, message: "请选择分类", type: "error" }],
  content: [{ required: true, message: "请输入内容", type: "error" }],
};


// 评论中的头像也需要修改
const getRandomAvatar = () => {
  const index = Math.floor(Math.random() * avatarUrls.length);
  return avatarUrls[index];
};



// 替换为自定义敏感词过滤实现
const customFilter = (text) => {
  // 自定义敏感词列表
  const sensitiveWords = [
    "傻逼",
    "垃圾",
    "废物",
    "狗屎",
    "混蛋",
    "白痴",
    "暴政",
    "妈的",
    "草",
    "买一送一",
    "加我",
  ];

  // 违法内容正则
  const illegalPatterns = [
    /[0-9]{11}/, // 手机号
    /[1-9][0-9]{4,}/, // QQ号
    /(https?|ftp):\/\/[^\s/$.?#].[^\s]*/, // 网址
    /微信\s*[:：]?\s*[a-zA-Z0-9_-]{6,}/, // 微信号
  ];

  let filteredText = text;

  // 替换敏感词
  sensitiveWords.forEach((word) => {
    const reg = new RegExp(word, "gi");
    filteredText = filteredText.replace(reg, "*".repeat(word.length));
  });

  // 替换违法内容
  illegalPatterns.forEach((pattern) => {
    filteredText = filteredText.replace(pattern, "***");
  });

  // 检查是否包含敏感内容
  const hasSensitiveContent = filteredText !== text;

  return {
    text: filteredText,
    hasSensitiveContent,
  };
};

// 弹窗引用
const newPostPopupRef = ref(null);

// 显示新帖对话框
const showNewPostDialog = () => {
  newPost.value = {
    title: "",
    category: "",
    content: "",
    images: [],
  };
  // 使用 ref 打开弹窗
  newPostPopupRef.value?.open();
};

// 关闭新帖对话框
const closeNewPostDialog = () => {
  // 使用 ref 关闭弹窗
  newPostPopupRef.value?.close();
  // 清空表单
  newPost.value = {
    title: "",
    category: "",
    content: "",
    images: [],
  };
};

// 发布新帖
const submitNewPost = async () => {
  if (!newPost.value.title?.trim()) {
    uni.showToast({
      title: "请输入标题",
      icon: "none",
    });
    return;
  }

  if (!newPost.value.content?.trim()) {
    uni.showToast({
      title: "请输入内容",
      icon: "none",
    });
    return;
  }

  // 过滤帖子内容
  const { text: filteredContent, hasSensitiveContent } = customFilter(
    newPost.value.content
  );
  const { text: filteredTitle, hasSensitiveContent: hasSensitiveTitle } =
    customFilter(newPost.value.title);

  if (hasSensitiveContent || hasSensitiveTitle) {
    uni.showToast({
      title: "帖子内容包含不当信息，请修改后重试",
      icon: "none",
    });
    return;
  }

  submitting.value = true;
  try {
    // 获取用户信息
    const userName = userStore?.userInfo?.user_name || "匿名用户";
    const userAvatar = userStore?.userInfo?.avatar || "https://pic1.imgdb.cn/item/678e5c23d0e0a243d4f5f76d.png";

    // 准备帖子数据
    const postData = {
      title: filteredTitle,
      content: filteredContent,
      category: newPost.value.category,
      user: userName,
      avatar: userAvatar,
      images: newPost.value.images,
      create_time: new Date().toISOString(),
      update_time: new Date().toISOString(),
      likes: 0,
      islinked: false,
      share: 0,
      comment: 0,
      comments: []
    };

    const response = await uni.request({
      url: API_URL,
      method: "POST",
      data: {
        action: "addPost",
        postData: postData
      }
    });

    if (response.data.status === 1) {
      uni.showToast({
        title: "发布成功",
        icon: "success",
      });
      closeNewPostDialog();
      // 刷新帖子列表
      await forumStore.fetchPosts();
    } else {
      uni.showToast({
        title: response.data.message || "发布失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("发布失败:", error);
    uni.showToast({
      title: "发布失败，请稍后重试",
      icon: "none",
    });
  } finally {
    submitting.value = false;
  }
};

// 点赞/取消点赞
const toggleLike = async (post) => {
  try {
    const response = await uni.request({
      url: API_URL,
      method: "POST",
      data: {
        action: "likePost",
        postId: post._id
      }
    });

    if (response.data.status === 1) {
      // 更新本地状态
      post.islinked = !post.islinked;
      post.likes = post.islinked
        ? (post.likes || 0) + 1
        : (post.likes || 0) - 1;

      uni.showToast({
        title: response.data.message,
        icon: "success",
      });
    }
  } catch (error) {
    uni.showToast({
      title: "操作失败",
      icon: "error",
    });
  }
};

// 分享帖子
const sharePost = async (post) => {
  try {
    const response = await uni.request({
      url: API_URL,
      method: "POST",
      data: {
        action: "share",
        data: {
          _id: post._id,
          share: post.share || 0,
        }
      }
    });

    if (response.data.status === 1) {
      // 更新本地状态
      post.share = (post.share || 0) + 1;

      // 调用系统分享
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        title: post.title,
        summary: post.content,
        success: function () {
          uni.showToast({
            title: "分享成功",
            icon: "success",
          });
        },
        fail: function () {
          uni.showToast({
            title: "分享失败",
            icon: "error",
          });
        },
      });
    }
  } catch (error) {
    uni.showToast({
      title: "分享失败",
      icon: "error",
    });
  }
};

// 打开评论弹窗
const openCommentDialog = (post) => {
  currentPost.value = post;
  // 获取评论列表
  fetchComments(post._id);
  // 打开弹窗
  uni.getPopupRef("commentPopup").open();
};

// 修改获取评论列表函数
const fetchComments = async (postId) => {
  try {
    const response = await uni.request({
      url: API_URL,
      method: "POST",
      data: {
        action: "getPostDetail",
        postId: postId
      }
    });

    if (response.data.status === 1) {
      const post = response.data.data;
      currentPost.value = post;
      if (!currentPost.value.comments) {
        currentPost.value.comments = [];
      }
    } else {
      uni.showToast({
        title: response.data.message || "获取评论失败",
        icon: "none"
      });
    }
  } catch (error) {
    console.error("获取评论失败:", error);
    uni.showToast({
      title: "获取评论失败",
      icon: "none"
    });
  }
};

// 修改提交评论函数
const submitComment = async () => {
  if (!newComment.value?.trim()) {
    uni.showToast({
      title: "请输入评论内容",
      icon: "none"
    });
    return;
  }

  // 过滤评论内容
  const { text: filteredContent, hasSensitiveContent } = customFilter(
    newComment.value
  );

  if (hasSensitiveContent) {
    uni.showToast({
      title: "评论包含不当内容，请修改后重试",
      icon: "none"
    });
    return;
  }

  try {
    const commentData = {
      user_name: currentUser.value,
      content: filteredContent,
      avatar: getRandomAvatar()  // 添加头像
    };

    const response = await uni.request({
      url: API_URL,
      method: "POST",
      data: {
        action: "addComment",
        postId: currentPost.value._id,
        commentData: commentData
      }
    });

    if (response.data.status === 1) {
      // 清空输入框
      newComment.value = "";
      
      uni.showToast({
        title: "评论成功",
        icon: "success"
      });

      // 重新获取评论列表
      await fetchComments(currentPost.value._id);
    } else {
      uni.showToast({
        title: response.data.message || "评论失败",
        icon: "none"
      });
    }
  } catch (error) {
    console.error("评论失败:", error);
    uni.showToast({
      title: "评论失败，请稍后重试",
      icon: "none"
    });
  }
};

// 格式化时间
const formatTime = (time) => {
  if (!time) return "";
  return moment(time).fromNow();
};

// 跳转到帖子详情
const goToDetail = (postId) => {
  console.log('跳转到帖子详情，ID:', postId);
  uni.navigateTo({
    url: `/pages/forum/post-detail?id=${postId}`,
    success: () => {
      console.log('成功跳转到详情页，ID:', postId);
    },
    fail: (err) => {
      console.error('跳转失败:', err);
    }
  });
};

// 预览图片
const previewImage = (images, current) => {
  const urls = images.map((i) => url("c", i, "png"));
  uni.previewImage({
    urls,
    current,
  });
};

// 获取分类标签
const getCategoryLabel = (value) => {
  const category = categories.find((cat) => cat.value === value);
  return category ? category.label : "";
};

// 分类选择改变
const onCategoryChange = (e) => {
  activeCategoryIndex.value = e.currentIndex;
  activeCategory.value = categories[e.currentIndex].value;
  console.log("Category changed:", activeCategory.value);
};

// 关闭评论弹窗
const closeCommentDialog = () => {
  uni.getPopupRef("commentPopup").close();
};

// 根据分类筛选帖子
const filteredPosts = computed(() => {
  if (!posts.value) return [];
  console.log("Filtering posts:", posts.value);
  return posts.value.filter((post) => {
    if (activeCategory.value === "all") return true;
    return post.category === activeCategory.value;
  });
});

onMounted(async () => {
  console.log("Component mounted");
  await forumStore.fetchPosts();
  checkUserCheckinStatus(); // 检查打卡状态
});
</script>

<style lang="scss" scoped>
.forum-container {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 20rpx;
}

.header {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  margin-bottom: 20rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;

    .bi {
      margin-right: 10rpx;
    }
  }

  .new-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 6rpx;
    font-size: 24rpx;
  }
}

/* 打卡活动样式 */
.checkin-container {
  margin-bottom: 20rpx;
  padding: 0 20rpx;
}

.checkin-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #cde6e3 0%, #89aca8 100%);
  padding: 20rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("https://epoch.jxksd.top/mo/images/ib0.jpg") no-repeat center center;
    background-size: cover;
    opacity: 0.1;
    z-index: 0;
  }
}

.checkin-left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.checkin-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.checkin-desc {
  font-size: 24rpx;
  color: #555;
}

.checkin-right {
  position: relative;
  z-index: 1;
}

.checkin-btn {
  background-color: #6c8380;
  color: #fff;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
  border-radius: 40rpx;
  border: none;
  
  &.checked {
    background-color: #8da9a6;
    opacity: 0.8;
  }
  
  .bi {
    font-size: 28rpx;
  }
  
  &:active {
    opacity: 0.9;
  }
}

.post-list {
  padding: 0 20rpx;
}

.post-card {
  background: #fff;
  position: relative;
  border-radius: 40rpx;
  border: 1px solid var(--td-brand-color);
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("https://epoch.jxksd.top/mo/images/ib0.jpg") no-repeat center center;
    background-size: cover;
    height: 100%;
    opacity: 0.1; // 调整透明度
    z-index: 0;
  }

  .card-body {
    position: relative;
    z-index: 1;
    padding: 20rpx;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    object-fit: cover;
    background-color: #f5f5f5; /* 添加默认背景色 */
  }

  .user-detail {
    display: flex;
    flex-direction: column;

    .username {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
    }

    .time {
      font-size: 24rpx;
      color: #999;
    }
  }
}

.post-content {
  margin-bottom: 16rpx;

  .post-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 12rpx;
    display: block;
  }

  .post-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
  }
}

.post-images {
  margin-bottom: 16rpx;

  .image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10rpx;

    .preview-image {
      width: 100%;
      height: 200rpx;
      border-radius: 8rpx;
      object-fit: cover;
    }

    .more-images {
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      height: 200rpx;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
    }
  }
}

.post-actions {
  display: flex;
  gap: 30rpx;
  padding-top: 16rpx;
  border-top: 2rpx solid #f5f5f5;

  .action-btn {
    display: flex;
    align-items: center;
    gap: 8rpx;
    color: #666;
    font-size: 28rpx;

    .bi {
      font-size: 32rpx;
      transition: all 0.3s ease;

      &.heart-active {
        color: #ff4757;
        transform: scale(1.1);
      }
    }

    .count {
      font-size: 24rpx;
      min-width: 40rpx;
    }

    &:active {
      opacity: 0.8;
    }
  }
}

.popup-content {
  background: #fff;
  border-radius: 20rpx;
  width: 600rpx;
  max-height: 80vh;
}

.popup-header {
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-left {
    display: flex;
    align-items: center;
    gap: 12rpx;

    .bi {
      font-size: 36rpx;
      color: var(--td-brand-color);
    }
  }
}

.popup-body {
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.form-item {
  margin-bottom: 30rpx;

  .label {
    display: block;
    margin-bottom: 16rpx;
    font-size: 28rpx;
    color: #333;
  }

  .input,
  .picker,
  .textarea {
    width: 100%;
    border: 2rpx solid #eee;
    border-radius: 8rpx;
    padding: 16rpx;
    font-size: 28rpx;
  }

  .textarea {
    height: 200rpx;
  }
}

.popup-footer {
  padding: 30rpx;
  border-top: 2rpx solid #f5f5f5;

  .submit-btn {
    width: 100%;
  }
}

.comment-popup {
  background: #fff;
  border-radius: 20rpx;
  width: 100%;
  max-height: 80vh;
}

.popup-header {
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-left {
    display: flex;
    align-items: center;
    gap: 12rpx;

    .bi {
      font-size: 36rpx;
      color: var(--td-brand-color);
    }
  }
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
}

.close-btn {
  font-size: 32rpx;
  color: #999;
  padding: 10rpx;

  &:active {
    opacity: 0.8;
  }
}

.comments-list {
  max-height: 60vh;
  overflow-y: auto;
}

.comment-item {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  object-fit: cover;
  background-color: #f5f5f5;
}

.comment-content {
  margin-left: 16rpx;
}

.comment-info {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 8rpx;

  .comment-username {
    display: flex;
    align-items: center;
    gap: 4rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333;

    .bi {
      font-size: 24rpx;
      color: var(--td-brand-color);
    }
  }

  .comment-time {
    display: flex;
    align-items: center;
    gap: 4rpx;
    font-size: 24rpx;
    color: #999;

    .bi {
      font-size: 20rpx;
    }
  }
}

.comment-text {
  font-size: 28rpx;
  color: #333;
}

.comment-input {
  padding: 20rpx;
  border-top: 2rpx solid #f5f5f5;
  display: flex;
  align-items: center;
  gap: 16rpx;

  .input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 16rpx;
    background: #f5f5f5;
    border-radius: 36rpx;

    .bi {
      font-size: 32rpx;
      color: #666;
    }

    input {
      flex: 1;
      font-size: 28rpx;
      background: transparent;
    }
  }

  .send-btn {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 0 24rpx;
    height: 64rpx;

    .bi {
      font-size: 24rpx;
    }
  }
}

@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }

  .preview-image {
    height: 80px;
  }

 

  .comments-container {
    max-height: 70vh;
  }
}

.category-tabs {
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;

  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.loading-state,
.empty-state {
  padding: 40rpx;
  text-align: center;
  color: #999;
}
</style>
